

export default function myHeader({ isInput, setIsInput, searchVal, setInputValue }) {

    function setInputValue1() {
        let input = document.querySelector(".searchInptVal")
        let val = input.value.trim()
        if (!val) {
            return alert("请输入关键字")
        }
        setInputValue(val)
        setIsInput(false)
        input.value = ""
    }

    const setInputValue2 = (e) => {
       // console.log(e);
        if (e.keyCode !== 13) return
        let val = e.target.value.trim()
        if (!val) {
            return alert("请输入关键字")
        }
        setInputValue(val)
        setIsInput(false)
        e.target.value = ""

    }

    return (
        <div className="myheader">
            <h1>
                代办纪要
            </h1>
            <span className="add" onClick={() => { setIsInput(!isInput) }}>
                +
            </span>
            {
                isInput ? (
                    <div className="searchInput">
                        <input onKeyUp={setInputValue2} className="searchInptVal" type="text" placeholder="请输入代办事件" />
                        <button onClick={setInputValue1}>
                            确定
                        </button>
                    </div>
                ) :
                    (
                        <></>
                    )
            }

        </div>
    )
}